<template>
  <div>
    <el-form :model="authorization" :rules="rules" ref="ruleFormRef" class="login-form">
      <el-form-item prop="name">
        <el-input placeholder="请输入用户" v-model="authorization.name">
          <template v-slot:prepend><el-icon><User /></el-icon></template>
        </el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input placeholder="请输入密码" show-password v-model="authorization.password">
          <template v-slot:prepend><el-icon><Unlock /></el-icon></template>
        </el-input>
      </el-form-item>
      <div class="actions">
        <el-checkbox v-model="authorization.rememberMe" class="check"> 自动登录 </el-checkbox>
        <el-button
          link
          type="primary"
          style="float: right; display: inline-block; padding: 0 10px 0 0"
          v-on:click="$emit('changeMode')"
          >注册新用户
        </el-button>
        <el-button
          type="primary"
          style="width: 100%; display: block; margin: 50px 0 0 0"
          @click="login(ruleFormRef)"
          >登录</el-button
        >
      </div>
      <hr />
      <div style="text-align: center">
        登录代表你已同意
        <el-tooltip effect="dark" content="演示用途，并没有写" placement="bottom">
          <el-button type="primary" link>用户协议</el-button>
        </el-tooltip>
        和
        <el-tooltip effect="dark" content="也是没有写" placement="bottom">
          <el-button type="primary" link style="margin-left: 0">隐私政策</el-button>
        </el-tooltip>
      </div>
    </el-form>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { MapLocation, Unlock, User } from '@element-plus/icons-vue'

const authorization = ref({
  name: '',
  password: '',
  language: 'zhCN',
  rememberMe: false,
})
const rules = reactive({
  name: [{ required: true, message: '请输入用户名称', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
})

const ruleFormRef = ref();

// const emit = defineEmits(['login'])

async function login(loginForm) {
  if(!loginForm)return
  await loginForm.validate((valid, fields) =>{
    if (valid) {
      // emit('login', authorization.value)
    } else {
      return false
    }
  })
}
</script>

<style scoped>
.logo {
  width: 120px;
  height: 120px;
  display: block;
  padding: 70px 0 0 165px;
}

.title {
  width: 100%;
  display: block;
  text-align: center;
  padding-top: 20px;
  line-height: 1em;
  color: #333;
  font-size: 20px;
  font-family:
    'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑',
    Arial, sans-serif;
}

.login-form {
  padding: 50px 40px;
}

.actions {
  padding: 20px 0;
  width: 100%;
  display: block;
}

hr {
  height: 0;
  width: 90%;
  border: 1px solid #bbb;
  border-bottom: 0px;
}

.check {
  float: left;
  display: inline-block;
  padding-left: 10px;
}

.select-prefix {
  /*border-right: 0;*/
  border: 1px solid #dcdfe6;
  background-color: #f5f7fa;
  color: #909399;
  vertical-align: middle;
  display: table-cell;
  position: relative;
  border-radius: 4px;
  padding: 0 20px;
  height: 38px;
  left: -5px;
}

i {
  font-size: 18px;
}
</style>
